<!--
  Generated template for the RegisterPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->

<ion-content>
  <img class="bg" src="assets/imgs/lbg.png" alt="">
  <ion-icon tappable (click)="back()" class="back" name="md-arrow-back"></ion-icon>
  <div class="container">

    <div class="form_box center">
      <h1>注 册</h1>
      <form [formGroup]="registerForm" novalidate [class.invalidForm]='invalidForm'>
        <div class="input_box" [class.error]="registerErrors['mobileNum']">
          <label>
            <ion-icon name="ios-phone-portrait"> </ion-icon>
          </label>
          <input type="text" formControlName="mobileNum" [(ngModel)]="params.mobile" placeholder='手机号码'>
          <p *ngIf="registerErrors['mobileNum']">{{registerErrors['mobileNum']}}</p>
        </div>
        <div class="input_box" [class.error]="registerErrors['phoneCode']">
          <label>
            <ion-icon name="ios-calendar-outline"></ion-icon>
          </label>
          <input type="text" class="captcha_input" [(ngModel)]="params.send_param" formControlName="phoneCode" placeholder='验证码'>
          <span class="captcha_text" (click)="sendCaptcha()" tappable>{{captchaText}}</span>
          <p *ngIf="registerErrors['phoneCode']">{{registerErrors['phoneCode']}}</p>
        </div>
        <div class="input_box" [class.error]="registerErrors['userName']">
          <label>
            <ion-icon name="ios-person-outline"> </ion-icon>
          </label>
          <input type="text" formControlName="userName" [(ngModel)]="params.username" placeholder='姓 名'>
          <p *ngIf="registerErrors['userName']">{{registerErrors['userName']}}</p>
        </div>
        <div class="input_box" [class.error]="registerErrors['password']">
          <label>
            <ion-icon name="ios-lock-outline"> </ion-icon>
          </label>
          <input type="password" formControlName="password" [(ngModel)]="params.password" placeholder='密 码'>
          <p *ngIf="registerErrors['password']">{{registerErrors['password']}}</p>
        </div>
        <div class="input_box" [class.error]="registerErrors['rePassword']">
          <label>
            <ion-icon name="ios-unlock"> </ion-icon>
          </label>
          <input type="password" formControlName="rePassword" placeholder='再次确认密码'>
          <p *ngIf="registerErrors['rePassword']">{{registerErrors['rePassword']}}</p>
          <p *ngIf="registerForm.controls['rePassword'].value != registerForm.controls['password'].value  && registerForm.controls['rePassword'].dirty ">{{validationMessages['rePassword']['notMatch']}}</p>
        </div>
        <div class="input_box" [class.error]="registerErrors['parentNum']">
            <label>
              <ion-icon name="ios-phone-portrait"></ion-icon>
            </label>
            <input type="text" formControlName="parentNum" [(ngModel)]="params.parentNum" placeholder='推荐人手机号码（非必填）'>
            <p *ngIf="registerErrors['parentNum']">{{registerErrors['parentNum']}}</p>
        </div>
      </form>
      <button ion-button full tappable (click)="register()">注 册</button>
    </div>
  </div>
</ion-content>
